<template>
  <div>
    <h1>{{ photomessage.title }}</h1>
    <div class="head">
      <span
        >发表时间:{{ photomessage.add_time | dateFormat("YYYY-DD-DD ") }}</span
      >
      <span class="clicktime">点击次数:{{ photomessage.click }}</span>
    </div>

    <hr /> 
    <!-- 缩略图区域 -->
    <div class="thumbs">
  <vue-preview :slides="photolistthumb" @close="handleClose"  ></vue-preview>
    </div>



    <!-- 内容区域 -->
    <div class="content" v-html="photomessage.content"></div>
 
    <!-- 评论子组件 -->
    <comment1 :newid="this.id"></comment1>
  </div>
</template>

<script>
import comment1 from "../sub-components/comment.vue";
export default {
  data() {
    return {
      photomessage: {},
      photolistthumb:[]
    };
  },
  created() {
    this.getphotobyid();
    this.getThmbimg()
  },
  methods: {
    async getphotobyid() {
      const { data } = await this.$http.get("/api/getimageInfo/" + this.id);

      this.photomessage = data.message[0];
    //   console.log(this.photomessage);
    },
    async getThmbimg(){
      const { data } = await this.$http.get("/api/getthumimages/" + this.id);
        data.message.forEach(item => {
            item.w=600;
            item.h=400;

        });
        this.photolistthumb = data.message
        console.log(data.message)
    },
     handleClose () {
        console.log('close event')
      }
  },
  props: ["id"],
  components: {
    comment1,
  },
};
</script>

<style lang="scss" scoped>
h1 {
  text-align: center;
  font-size: 16px;
  color: #0984e3;
}
.head {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  margin: 8px;
}

// .thumbs {
//             /deep/ .my-gallery{   //deep深层作用选择器
//                 display: flex;
//                 flex-wrap:wrap;//默认换行
//                 figure{
//                     width: 30%;
//                     margin: 5px;
//                     img{
//                         width: 100%;
//                         box-shadow: 0 0 8px #999;
//                         border-radius: 5px;
//                     }
//                 }
//             }
//         }
</style>
